import React, { useState, useEffect } from "react";
import {
  RouteObject,
  RouterProvider,
  createBrowserRouter,
  redirect,
  Outlet,
} from "react-router-dom";
import { Suspense, lazy } from "react";
import NprogressBar from "@/componets/nprogress-bar";
import RootLayout from "@/layout/root-layout";
import { ConfigProvider } from "antd";
import { request } from "@/utils/request";

interface Video {
  id: string;
  materialName: string;
  completedUrl: string;
  createdAt: string;
  taskId: string;
  taskStatus: any;
  videoText: any;
}

const Login = lazy(() => import("@/pages/login"));
const UpAiPersionData = lazy(() => import("@/pages/UpAiPersionData")); //首页
const ObjectForImage = lazy(() => import("@/pages/ObjectForImage")); //OSS文件管理
const AiPersionList = lazy(() => import('@/pages/AIPersionList'))//Ai人设管理页面
const EditAiInfor = lazy(() => import('@/pages/EditAiinformation'))//修改人设信息的页面
const Users = lazy(() => import('@/pages/Users'))//用户管理页面
const UserAgent = lazy(() => import('@/pages/user_agent/index'))//Agent管理页面

const routes: RouteObject[] = [
  {
    path: "/",
    element: <RootLayout />,
    loader: async () => {
      const token = localStorage.getItem("token");
      if (!token) {
        return redirect("/login");
      }
      return null;
    },
    children: [
      { index: true, element: <UpAiPersionData /> },//首页(用户管理页)
      { path: "/oss-management", element: <ObjectForImage /> },//OSS文件管理
      { path: "/Ai-persionList", element: <AiPersionList /> },
      { path: "/Users", element: <Users /> },
      { path: "/Users/agent", element: <UserAgent /> }
      // { path: "/topUpToday", element: <UpAiPersionData /> },//今日充值管理

    ],
  },
  { path: "/login", element: <Login /> },
  { path: "/EditAiInfor/:id", element: <EditAiInfor /> }
];

export default function App() {

  return (
    <ConfigProvider
      theme={{
        components: {
          Input: {
            borderRadiusLG: 3,
            activeBorderColor: "#40cfff",
            hoverBorderColor: "#40cfff",
          },
          Button: {
            colorPrimary: `#15b8f7`,
            colorPrimaryHover: "#40cfff",
            borderRadiusLG: 3,
          },
        },
      }}
    >
      <Suspense fallback={<NprogressBar />}>
        <RouterProvider
          router={createBrowserRouter(routes, {
            basename: import.meta.env.BASE_URL,
          })}
          fallbackElement={<NprogressBar />}
        />
      </Suspense>
    </ConfigProvider>
  );
}